<html>
    <head>
        <title>styles节点</title>
    </head>
    <body>
        <script>
            /*
                一、自定义导航栏使用注意

                                1、非 H5 端，手机顶部状态栏会被页面内容覆盖。

                                        这是因为窗体是沉浸式的原因，即全屏可写内容。

                                        uni-app 提供了状态栏高度的css变量  --status-bar-height,

                                        如果需要把状态栏的位置从前景部分让出来，可写一个div占位，高度设置为 css变量：

                                        eg：

                                                <template>
                                                    <view>
                                                        <view class="status-bar">
                                                            !--这是状态栏---
                                                        </view>
                                                        <view>状态栏下的文字</view>
                                                    </view>
                                                </template>
                                                <style>
                                                    .status-bar{
                                                        height: var(--status-bar-height);
                                                        width:100%;
                                                    }
                                                </style>


                                2、如果原生导航栏不能满足需求，推荐使用 uni ui 的 "自定义导航栏NavBar" 。 这个前端导航栏自动处理了状态栏高度占位问题。

                                3、前端导航栏搭配原生下拉刷新时，会有问题，包括：

                                        ①、微信小程序下iOS需要拉更长才能看到下拉刷新的三个点，而Android是从屏幕顶部下拉，无法从导航栏下方下拉。
                                            
                                            如果一定要从前端导航栏下拉，小程序下只能放弃原生下拉刷新，纯前端模拟，参考mescroll插件，但这样很容易产生性能问题。目前小程序平台自身没有提供更好的方案

                                        ②、  App和H5下，原生下拉刷新提供了circle样式，可以指定offset偏移量（pages.json的app-plus下配置），自定义下拉圈出现的位置。在hello uni-app的扩展组件中有示例。

                                4、非H5端，前端导航盖不住原生组件。如果页面有video、map、textarea(仅小程序)等原生组件，滚动时会覆盖住导航
                                                
                                        ①、如果是小程序下，可以使用cover-view来做导航栏，避免覆盖问题

                                        ②、如果是App下，建议使用titleNView或subNVue，体验更好

                                5、前端组件在渲染速度上不如原生导航栏，原生导航可以在动画期间渲染，保证动画期间不白屏，但使用前端导航栏，在新窗体进入的动画期间可能会整页白屏，越低端的手机越明显。

                                6、以上讨论的是前端自定义导航栏，但在App侧，原生导航栏也提供了比小程序导航更丰富的自定义性

                                        ①、titleNView：给原生导航栏提供更多配置，包括自定义按钮、滚动渐变效果、搜索框等，详见titleNView

                                        ②、subNVue：使用nvue原生渲染，所有布局自己开发，具备一切自定义灵活度。详见subNVue

                                7、页面禁用原生导航栏后，想要改变状态栏的前景字体样式，仍可设置页面的 navigationBarTextStyle 属性（只能设置为 black或white）。
                                
                                    如果想单独设置状态栏颜色，App端可使用plus.navigator.setStatusBarStyle设置。注意部分低端Android手机（4.4）自身不支持设置状态栏前景色。

                        ★、总结：

                                    鉴于以上问题，在原生导航能解决业务需求的情况下，尽量使用原生导航。甚至优势需要牺牲一些不是很重要的需求。

                                    在 APP 和 H5 下， uni-app 提供了灵活的处理方案：  titleNView 和 subNVue  或者整页使用呢 nvue 。

                                    但在小程序下，因为自身而限制，没有太好的方案。有必要的话，也可以使用条件编译分端处理。
            */

            /*
                二、app-plus 


                    <1>、配置项列表

                                            配置编译到App(安卓、ios)平台时的特定样式，部分常用配置H5平台也支持。一下仅列出常用，更多配置项参考 WebviewStyles


                                            属性              类型              默认            描述                                                         平台兼容

                                        1、background        HexColor        #FFFFFF      窗体背景色。无论Vue页面还是 nvue页面，在App上都有一个父级原生
                                                                                        窗体，该窗体的背景色生效时间快于页面里的CSS生效时间。

                                        2、titleNView        Object                       导航栏，详见                                                       	App、H5

                                        3、subNVues          Array                        原生子窗体，详见:原生子窗体                                           App 1.9.10+

                                        4、bounce            String                       页面回弹效果，设置为 "none" 时关闭效果。                              App-vue（nvue Android无页面级bounce效果，
                                                                                                                                                                仅list、recycle-list、waterfall等滚动组件有bounce效果） 
                                        
                                        5、popGesture       String           close        侧滑返回功能，可选值："close"（启用侧滑返回）                          App-iOS
                                                                                        、"none"（禁用侧滑返回）   

                                        6、softinputNavBar  String           auto         iOS软键盘上完成工具栏的显示模式，设置为 "none" 时关闭工具栏。           	App-iOS

                                        7、softinputMode    String         adjustPan      软键盘弹出模式，支持 adjustResize、adjustPan 两种模式                   App

                                        8、pullToRefresh    Object                        下拉刷新                                                              App

                                        9、scrollIndicator  String                        滚动条显示策略，设置为 "none" 时不显示滚动条                             App

                                        10、animationType   String         pop-in         窗口显示的动画效果，详见： 窗口动画                                      App

                                        11、animationDuration Number        300           窗口显示动画的持续时间，单位为ms                                         App


                                    ★、注意：

                                            .nvue 页面支持 titleNView 、pullToRefresh、scrollIndicator 配置，其它配置项暂不支持

                    <2>、导航栏

                             1、属性列表

                                                    属性               类型                默认值          描述                                                       平台兼容

                                                1、backgroundColor    String              #F7f7f7        背景颜色，支持16进制颜色或RGBA颜色                        App端仅悬浮导航栏支持RGBA颜色

                                                2、buttons            Array                              自定义按钮，详见 buttons                                 纯 nvue 值 render:native 时暂不支持

                                                3、titleColor         String              #000000        标题文字颜色                                            

                                                4、titleOverFlow      String              ellipsis       标题文字超出显示区域时处理方式。
                                                                                                        "clip"-超出显示区域时内容裁剪；
                                                                                                        "ellipsis"-超出显示区域时尾部显示省略标记（...）。   
                                                                                                        
                                                5、titleText          String                             标题文字内容

                                                6、titleImage         String                             标题文字字体大小

                                                7、type               String              default        导航栏样式。                                             App-nvue 2.4.4+ 支持、App-vue、H5
                                                                                                        "default"-默认样式；
                                                                                                        "transparent"-滚动透明渐变；
                                                                                                        "float"-悬浮导航栏。

                                                8、tags               Array                               原生 View增强，详见：5+ View 控件

                                                9、searchInput        Object                              原生导航栏上的搜索框配置，详见： searchInput

                                                10、homeButton        Boolean             false           标题控件是否显示Home按钮                                 App

                                                11、autoBackButton    Boolean             true            标题栏控件是否显示左侧返回按钮                            App

                                                12、backButton        Object                              返回按钮的样式，详见：backButton                         App

                                                13、backgroundImage   String                              支持以下类型： 背景图片路径 - 如"/static/img.png"，仅支持本地文件绝对路径，根据实际标题栏宽高拉伸绘制； 
                                                                                                        渐变色 - 仅支持线性渐变，两种颜色的渐变，如“linear-gradient(to top, #a80077, #66ff00)”， 
                                                                                                        其中第一个参数为渐变方向，可取值： "to right"表示从左向右渐变， “to left"表示从右向左渐变，
                                                                                                            “to bottom"表示从上到下渐变， “to top"表示从下到上渐变， “to bottom right"表示从左上角到右下角， “to top left"表示从右下角到左上角

                                                14、backgroundRepeat  String                              仅在backgroundImage设置为图片路径时有效。 可取值： "repeat" - 背景图片在垂直方向和水平方向平铺；
                                                                                                            "repeat-x" - 背景图片在水平方向平铺，垂直方向拉伸；
                                                                                                            “repeat-y” - 背景图片在垂直方向平铺，水平方向拉伸； 
                                                                                                            “no-repeat” - 背景图片在垂直方向和水平方向都拉伸。 
                                                                                                            默认使用 “no-repeat" 
                                                                                                            
                                                                                                            
                                                15、titleAlign        String              “auto”          可取值： "center"-居中对齐； 
                                                                                                            "left"-居左对齐； 
                                                                                                            "auto"-根据平台自动选择（Android平台居左对齐，iOS平台居中对齐）

                                                16、blurEffect        String              "none"          此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。 
                                                                                                            可取值： "dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果； 
                                                                                                            "extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果； 
                                                                                                            "light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果； 
                                                                                                            "none" - 无模糊效果。 注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。

                                                17、coverage          String               "132px"         标题栏控件变化作用范围，仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。 
                                                                                                            当页面滚动到指定偏移量时标题栏背景变为完全不透明。 支持百分比、像素值

                                                18、splitLine         Boolean             false            标题栏的底部分割线(SplitLineStyles)，设置此属性则在标题栏控件的底部显示分割线，可配置颜色值及高度。
                                                                                                            设置此属性值为undefined或null则隐藏分割线。 默认不显示底部分割线

                                                19、subtitleColor     String                               副标题文字颜色，颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，
                                                                                                            如"#FF0000"表示标题文字颜色为红色。 默认值与主标题文字颜色一致

                                                20、subtitleSize      String              “auto”           副标题文字字体大小，字体大小单位为像素，如"14px"表示字体大小为14像素，auto表示自动计算，约为12像素。

                                                21、subtitleOverflow  String              "ellipsis"       标题文字超出显示区域时处理方式，
                                                                                                            可取值： "clip" - 超出显示区域时内容裁剪； 
                                                                                                            "ellipsis" - 超出显示区域时尾部显示省略标记（...）。

                                                22、subtitleText      String                               副标题文字内容，设置副标后将显示两行标题，副标显示在主标题（titleText）下方。 注意：设置副标题后将居左显示

                                                23、titleIcon         String                               标题图标，图标路径如"./img/t.png"，仅支持本地文件路径， 
                                                                                                            相对路径，相对于当前页面的host位置，固定宽高为逻辑像素值"34px"。 
                                                                                                            要求图片的宽高相同。 注意：设置标题图标后标题将居左显示。

                                                24、titleIconRadius   String              无圆角            标题图标圆角，取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。


                <3>、SplitLineStyles


                            1、属性列表
                                                属性                  类型                默认值            描述
                                                
                                            1、color                 String             #CCCCCC          底部分割线颜色，可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色分割线；
                                                                                                        "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明

                                            2、height                String             "1px"            可取值：像素值（逻辑像素），支持小数点，如"1px"表示1像素高；
                                                                                                        百分比，如"1%"，相对于标题栏控件的高度。

                                    ★、提示：
                                        
                                                ①、页面支持通过配置 navigationStyle为custom，或titleNView为false，来禁用原生导航栏。
                                    
                                                        一旦禁用原生导航，请注意阅读自定义导航注意事项。

                                                ②、titleNView 的 type 值为 transparent 时，导航栏为滚动透明渐变导航栏，默认只有button，
                                                
                                                滚动后标题栏底色和title文字会渐变出现，不支持自定义按钮设置color属性； 
                                                
                                                type 为 float 时，导航栏为悬浮标题栏，此时页面内容上顶到了屏幕顶部，包括状态栏，但导航栏悬浮盖在页面上方，一般这种场景会同时设置导航栏的背景色为rgba半透明颜色。

                                                ③、titleNView 的 type 值为 transparent 时，App-nvue 2.4.4+ 支持

                                                ④、在 titleNView 配置 buttons 后，监听按钮的点击事件，vue 页面及 nvue 的weex编译模式参考：uni.onNavigationBarButtonTap ：https://uniapp.dcloud.net.cn/tutorial/nvue-outline#onnavigationbarbuttontap

                                                ⑤、在 titleNView 配置 searchInput 后，相关的事件监听参考：onNavigationBarSearchInputChanged 等  https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

                                                ⑥、可通过 [<navigation-bar>(/component/navigation-bar)] 配置

                                                ⑦、App下原生导航栏的按钮如果使用字体图标，注意检查字体库的名字（font-family）是否使用了默认的 iconfont，
                                                这个名字是保留字，不能作为外部引入的字体库的名字，需要调整为自定义的名称，否则无法显示。

                                                ⑧、想了解各种导航栏的开发方法，请详读导航栏开发指南


                            2、自定义按钮样式

                                              属性               类型           默认值               描述

                                          1、type              String          none              按钮样式，可取值见：buttons 样式    https://uniapp.dcloud.net.cn/collocation/pages#app-titlenview-buttons-type

                                          2、color             String     默认与标题文字颜色一致   按钮上文字颜色

                                          3、background        String     默认值为灰色半透明       按钮的背景颜色，仅在标题栏type=transparent时生效
                                          
                                          4、colorPressed      String     默认值为 color          	按下状态按钮文字颜色
                                                                          属性值自动调整透明度为 0.3

                                          5、float             String     right                    按钮在标题栏上的显示位置，可取值"left"、"right"

                                          6、fontWeight        String     normal                  按钮上文字的粗细。可取值"normal"-标准字体、"bold"-加粗字体。

                                          7、fontSize          String                             按钮上文字大小

                                          8、fontSrc           String                             按钮上文字使用的字体文件路径。不支持网络地址，请统一使用本地地址。

                                          9、select            Boolean      false                 是否显示选择指示图标(向下箭头)，常用于城市选择

                                          10、text             String                             按钮上显示的文字。  使用字体图标时 unicode 字符表示必须 '\u' 开头，如 "\ue123"（注意不能写成"\e123"）。

                                          11、width            String      44px                   按钮的宽度，可取值： "*px" - 逻辑像素值，如"10px"表示10逻辑像素值，不支持rpx。
                                                                                                  按钮的内容居中显示； "auto" - 自定计算宽度，根据内容自动调整按钮宽度
                                
                            3、自定义返回按钮的样式

                                        当autoBackButton设置为true时生效。

                                        通过此属性可自定义返回按钮样式，如图标大小、红点、角标、标题等。

                                             
                                        
                                        属性	            类型	        默认值	    描述

                                        1、background	    String	        none	背景颜色，仅在标题栏type=transparent时生效，当标题栏透明时按钮显示的背景颜色。 
                                                                                    可取值#RRGGBB和rgba格式颜色字符串，默认值为灰色半透明。
                                        
                                        2、badgeText	    String		            角标文本，最多显示3个字符，超过则显示为...
                                        
                                        3、color	        String	                窗口标题栏控件的标题文字颜色。	
                                                                                    图标和标题颜色，可取值： "#RRGGBB"格式字符串，
                                                                                    如"#FF0000"表示红色；
                                                                                     "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。
                                        
                                        4、colorPressed	    String		            按下状态按钮文字颜色，可取值： "#RRGGBB"格式字符串，如"#FF0000"表示红色；
                                                                                    "rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，
                                                                                    A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，
                                                                                    表示红色半透明。 默认值为color属性值自动调整透明度为0.3。
                                        
                                        5、fontWeight	    String	       "normal"	返回图标的粗细，可取值： "normal" - 标准字体； "bold" - 加粗字体。
                                        
                                        6、fontSize	        String		            返回图标文字大小，可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。 
                                                                                    窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"； 
                                                                                    窗口标题栏为默认样式（type="default"）时，默认值为"27px"。
                                        
                                        7、redDot	        Boolean	        false	是否显示红点，设置为true则显示红点，false则不显示红点。默认值为false。 注意：当设置了角标文本时红点不显示。
                                        
                                        8、title	        String		            返回按钮上的标题，显示在返回图标（字体图标）后，默认为空字符串。
                                        
                                        9、titleWeight	    String	       "normal"	返回按钮上标题的粗细，可取值： "normal" - 标准字体； "bold" - 加粗字体。

                            4、按钮样式

                                        使用 type 值设置按钮的样式时，会忽略 fontSrc 和 text 属性。

                                            值	        说明
                                            
                                        1、forward	    前进按钮

                                        2、back	        后退按钮

                                        3、share	    分享按钮

                                        4、favorite	    收藏按钮

                                        5、home	        主页按钮

                                        6、menu	        菜单按钮

                                        7、close	    关闭按钮

                                        8、none	        无样式，需通过 text 属性设置按钮上显示的内容、通过 fontSrc 属性设置使用的字体库。



                            5、搜索框配置

                                        searchInput可以在titleNView的原生导航栏上放置搜索框。其宽度根据周围元素自适应。

                                        <1>、属性列表

                                                        属性	             类型	   默认值	    描述

                                                    1、autoFocus	        Boolean	    false	    是否自动获取焦点

                                                    2、align	            String	    center	    非输入状态下文本的对齐方式。
                                                                                                    可取值： "left" - 居左对齐； 
                                                                                                    "right" - 居右对齐； "center" - 居中对齐。
                                                    
                                                    3、backgroundColor	    String	    rgba(255,255,255,0.5)	背景颜色

                                                    
                                                    4、borderRadius	        String	    0px	        输入框的圆角半径，取值格式为"XXpx"，其中XX为像素值（逻辑像素），不支持rpx。
                                                    
                                                    5、placeholder	        String		            提示文本。
                                                    
                                                    6、placeholderColor	    String	    #CCCCCC	    提示文本颜色
                                                    
                                                    7、disabled	            Boolean	    false	    是否可输入

                                        <2>、searchInput注意点：

                                                  searchInput的点击输入框onNavigationBarSearchInputClicked、文本变化onNavigationBarSearchInputChanged、点击搜索按钮，

                                                  onNavigationBarSearchInputConfirmed等生命周期，见文档页面生命周期。https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

                                                   ①、在生命周期里通过参数e.text，可获取输入框内容。具体见hello uni-app中模板-顶部导航栏中的示例

                                                   ②、如需动态修改searchInput，或者获取searchInput的placehold，参考uni-app动态修改App端导航栏

                                                            https://ask.dcloud.net.cn/article/35374
                                        

                            6、常见titleNView配置代码示例

                                        以下列出部分配置。

                                        关于全面的导航栏配置，这里有一个完善的演示工程，演示了导航栏的各种效果，详见：https://ext.dcloud.net.cn/plugin?id=1765

                                        eg：
                                                    {
                                                        "pages": [{
                                                                "path": "pages/index/index", //首页
                                                                "style": {
                                                                    "app-plus": {
                                                                        "titleNView": false //禁用原生导航栏
                                                                    }
                                                                }
                                                            }, {
                                                                "path": "pages/log/log", //日志页面
                                                                "style": {
                                                                    "app-plus": {
                                                                        "bounce": "none", //关闭窗口回弹效果
                                                                        "titleNView": {
                                                                            "buttons": [ //原生标题栏按钮配置,
                                                                                {
                                                                                    "text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
                                                                                }
                                                                            ],
                                                                            "backButton": { //自定义 backButton
                                                                                "background": "#00FF00"
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }, {
                                                                "path": "pages/detail/detail", //详情页面
                                                                "style": {
                                                                    "navigationBarTitleText": "详情",
                                                                    "app-plus": {
                                                                        "titleNView": {
                                                                            "type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
                                                                        }
                                                                    }
                                                                }
                                                            }, {
                                                                "path": "pages/search/search", //搜索页面
                                                                "style": {
                                                                    "app-plus": {
                                                                        "titleNView": {
                                                                            "type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
                                                                            "searchInput": {
                                                                                "backgroundColor": "#fff",
                                                                                "borderRadius": "6px", //输入框圆角
                                                                                "placeholder": "请输入搜索内容",
                                                                                "disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }
                                                            ...
                                                        ]
                                                    }


                    <4>、原生子窗体

                                        1、概述

                                                    subNVues 是 vue 页面的原生子窗体。用于解决App中 vue 页面中的层级覆盖和原生界面灵活自定义用的。

                                                    它不是全屏页面，也不是组件，就是一个原生子窗体。

                                                    它是一个 nvue 页面，使用 weex 引擎渲染，提供了比 cover-view、plus.nativeObj.view 更强大的原生排版能力，方便自定义原生导航或覆盖原生地图、视频等。
                                                    
                                                    请详读subNVues 开发指南 : http://ask.dcloud.net.cn/article/35948

                                                    subNVue 也可以在nvue页面中使用。但目前在纯 nvue 下（render 为 native）还不支持。


                                        2、属性列表：

                                                        属性	    类型	        描述

                                                        ①、id	    String	    subNVue 原生子窗体的标识

                                                        ②、path	    String	    配置 nvue 文件路径，nvue 文件需放置到使用 subNvue 的页面文件目录下，cli项目需要去掉.nvue后缀，只保留文件名

                                                        ③、type	    String	    原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏

                                                        ④、style	Object	    subNVue 原生子窗体的样式，配置项参考下方 subNVuesStyle

                                                        ★、注意：

                                                                    1、subNVues 的 id 是全局唯一的，不能重复

                                                                    2、可以通过 uni.getSubNVueById('id') 获取 subNVues 的实例

                                                                    3、subNVues 的 path 属性只能是 nvue 文件路径

                                       3、原生子窗体样式

                                                                    属性	    类型	    默认值	            描述

                                                                1、position	    String	   absolute	        原生子窗体的排版位置，排版位置决定原生子窗体在父窗口中的定位方式。
                                                                                                            可取值："static"，原生子窗体在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；
                                                                                                            "absolute"，原生子窗体在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；
                                                                                                            "dock"，原生子窗体在页面中停靠，停靠的位置由dock属性值决定。 默认值为"absolute"。

                                                                2、dock	        String	    bottom	        原生子窗体的停靠方式,仅当原生子窗体 "position" 属性值设置为 "dock" 时才生效，
                                                                                                            可取值："top"，原生子窗体停靠则页面顶部；
                                                                                                            "bottom"，原生子窗体停靠在页面底部；
                                                                                                            "right"，原生子窗体停靠在页面右侧；
                                                                                                            "left"，原生子窗体停靠在页面左侧。 
                                                                                                            默认值为"bottom"。

                                                                3、mask	        HexColor	rgba(0,0,0,0.5)	原生子窗体的遮罩层,仅当原生子窗体 "type" 属性值设置为 "popup" 时才生效，
                                                                                                            可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明；

                                                                4、width	    String	    100%	        原生子窗体的宽度,支持百分比、像素值，默认为100%。
                                                                                                            未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。

                                                                5、height	    String	    100%	        原生子窗体的高度,支持百分比、像素值，默认为100%。
                                                                                                            当未设置height属性值时，优先通过top和bottom属性值来计算原生子窗体的高度。

                                                                6、top	        String	    0px	            原生子窗体垂直向下的偏移量，支持百分比、像素值，默认值为0px。 
                                                                                                            未设置top属性值时，优先通过bottom和height属性值来计算原生子窗体的top位置。

                                                                7、bottom	    String		                原生子窗体垂直向上偏移量,支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。
                                                                                                            当同时设置了top和height值时，忽略此属性值； 
                                                                                                            当未设置height值时，可通过top和bottom属性值来确定原生子窗体的高度。

                                                                8、left	        String	    0px	            原生子窗体水平向左的偏移量，支持百分比、像素值，默认值为0px。
                                                                                                            未设置left属性值时，优先通过right和width属性值来计算原生子窗体的left位置。

                                                                9、right	    String		                原生子窗体水平向右的偏移量，支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。 
                                                                                                            当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和bottom属性值来确定原生子窗体的宽度。

                                                                10、margin	    String		                原生子窗体的边距，用于定位原生子窗体的位置，支持auto，auto表示居中。
                                                                                                            若设置了left、right、top、bottom则对应的边距值失效。

                                                                11、zindex	    Number		                原生子窗体的窗口的堆叠顺序值，
                                                                                                            拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，
                                                                                                            拥有相同堆叠顺序的窗口后调用show方法则在前面。

                                                                12、background	String	    #FFFFFF	        窗口的背景颜色,Android平台4.0以上系统才支持“transparent”背景透明样式。
                                                                                                            比如subnvue为圆角时需要设置为transparent才能看到正确的效果
                                            4、代码示例：

                                                    {
                                                        "pages": [{
                                                            "path": "pages/index/index", //首页
                                                            "style": {
                                                                "app-plus": {
                                                                    "titleNView": false , //禁用原生导航栏
                                                                    "subNVues":[{//侧滑菜单
                                                                        "id": "drawer", //subNVue 的 id，可通过 uni.getSubNVueById('drawer') 获取
                                                                        "path": "pages/index/drawer.nvue", // nvue 路径
                                                                        "style": { //webview style 子集，文档可暂时开放出来位置，大小相关配置
                                                                            "position": "popup", //除 popup 外，其他值域参考 5+ webview position 文档
                                                                            "width": "50%"
                                                                        }

                                                                    }, {//弹出层
                                                                        "id": "popup",
                                                                        "path": "pages/index/popup",
                                                                        "style": {
                                                                            "position": "popup",
                                                                            "margin":"auto",
                                                                            "width": "150px",
                                                                            "height": "150px"
                                                                        }

                                                                    }, {//自定义头
                                                                        "id": "nav",
                                                                        "path": "pages/index/nav",
                                                                        "style": {
                                                                            "position": "dock",
                                                                            "height": "44px"
                                                                        }

                                                                    }]
                                                                }
                                                            }
                                                        }]
                                                    }


                    <5>、下拉刷新

                                        在 App 平台下可以自定义部分下拉刷新的配置 page->style->app-plus->pullToRefresh

                                 1、属性列表

                                                属性	          类型	    默认值	        描述

                                            1、support	        Boolean	    false	    是否开启窗口的下拉刷新功能

                                            2、color	        String	    #2BD009	    颜色值格式为"#RRGGBB"，仅"circle"样式下拉刷新支持此属性。
                                            
                                            3、style	        String	                Android 平台为 circle；iOS 平台为 default。	
                                                                                        可取值："default"——经典下拉刷新样式（下拉拖动时页面内容跟随）；
                                                                                        "circle"——圆圈样式下拉刷新控件样式（下拉拖动时仅刷新控件跟随）。
                                            
                                            4、height	        String		            窗口的下拉刷新控件进入刷新状态的拉拽高度。
                                                                                        支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
                                            
                                            5、range	        String		            窗口可下拉拖拽的范围。支持百分比，如"10%"；
                                                                                        像素值，如"50px"，不支持rpx。
                                            
                                            6、offset	        String	    0px	        下拉刷新控件的起始位置。
                                                                                        仅对"circle"样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。
                                                                                        支持百分比，如"10%"；像素值，如"50px"，不支持rpx。
                                                                                        如使用了非原生title且需要原生下拉刷新，一般都使用circle方式并将offset调至自定义title的高度
                                            
                                            7、contentdown	    Object		            目前支持一个属性：caption——在下拉可刷新状态时下拉刷新控件上显示的标题内容。
                                                                                        仅对"default"样式下拉刷新控件有效。
                                            
                                            8、contentover	    Object		            目前支持一个属性：caption——在释放可刷新状态时下拉刷新控件上显示的标题内容。
                                                                                        仅对"default"样式下拉刷新控件有效。
                                            
                                            9、contentrefresh	Object		            目前支持一个属性：caption——在正在刷新状态时下拉刷新控件上显示的标题内容。
                                                                                        仅对"default"样式下拉刷新控件有效。

                               2、下拉刷新使用注意：

                                            ①、enablePullDownRefresh 与 pullToRefresh->support 同时设置时，后者优先级较高。

                                            ②、如果期望在 App 和小程序上均开启下拉刷新的话，请配置页面的 enablePullDownRefresh 属性为 true。

                                            ③、若仅期望在 App 上开启下拉刷新，则不要配置页面的 enablePullDownRefresh 属性，而是配置 pullToRefresh->support 为 true。

                                            ④、开启原生下拉刷新时，页面里不应该使用全屏高的scroll-view，向下拖动内容时，会优先触发下拉刷新而不是scroll-view滚动

                                            ⑤、原生下拉刷新的起始位置在原生导航栏的下方，如果取消原生导航栏，使用自定义导航栏，原生下拉刷新的位置会在屏幕顶部。
                                                
                                                    如果希望在自定义导航栏下方拉动，只能使用circle方式的下拉刷新，并设置offset参数，将circle圈的起始位置调整到自定义导航栏下方。
                                                    
                                                    hello uni-app的扩展组件中有示例。
                                            ⑥、如果想在app端实现更多复杂的下拉刷新，比如美团、京东App那种拉下一个特殊图形，可以使用nvue的<refresh>组件。HBuilderX 2.0.3+起，新建项目选择新闻模板可以体验

                                            ⑦、如果想在vue页面通过web前端技术实现下拉刷新，插件市场有例子，但前端下拉刷新的性能不如原生，复杂长列表会很卡

                                            ⑧、iOS上，default模式的下拉刷新和bounce回弹是绑定的，如果设置了bounce:none，会导致无法使用default下拉刷新

                                3、代码示例

                                            {
                                                "pages": [
                                                    {
                                                        "path": "pages/index/index", //首页
                                                        "style": {
                                                            "app-plus": {
                                                                "pullToRefresh": {
                                                                    "support": true,
                                                                    "color": "#ff3333",
                                                                    "style": "default",
                                                                    "contentdown": {
                                                                        "caption": "下拉可刷新自定义文本"
                                                                    },
                                                                    "contentover": {
                                                                        "caption": "释放可刷新自定义文本"
                                                                    },
                                                                    "contentrefresh": {
                                                                        "caption": "正在刷新自定义文本"
                                                                    }
                                                                }
                                                            }
                                                        }
                                                    }
                                                ]
                                            }
                                            
            */  


            /*
                 三、mp-alipay

                        配置编译到 MP-ALIPAY 平台时的特定样式

                        1、属性列表

                                   属性	                 类型	    默认值	    描述

                                ①、allowsBounceVertical	String	    YES	    是否允许向下拉拽。支持 YES / NO

                                ②、titleImage	        String		        导航栏图片地址（替换当前文字标题），必须使用https的图片链接地址

                                ③、transparentTitle	    String	    none	导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明

                                ④、titlePenetrate	    String	    NO	    导航栏点击穿透

                                ⑥、showTitleLoading	    String	    NO	    是否进入时显示导航栏的 loading。支持 YES / NO

                                ⑥、backgroundImageUrl	String		        下拉露出显示的背景图链接

                                ⑦、backgroundImageColor	HexColor		    下拉露出显示的背景图底色

                                ⑧、gestureBack	        String	    NO	    iOS 用，是否支持手势返回。支持 YES / NO

                                ⑨、enableScrollBar	    String	    YES	    Android 用，是否显示 WebView 滚动条。支持 YES / NO


                        2、注意事项

                                ①、titleImage仅支持https地址，设置了titleImage会替换页面文字标题

                                ②、backgroundImageUrl支持网络地址和本地地址，尽量使用绝对地址

                                ③、部分配置可能会只在真机运行的时候生效，支付宝未来应该会改善
            */

            /*
                四、mp-weixin

                            配置编译到 MP-WEIXIN 平台时的特定样式

                        1、属性列表

                                    属性	                    类型	      默认值	        描述

                                ①、homeButton	                Boolean	    false	        在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键

                                ②、backgroundColorTop	        HexColor	#ffffff	        顶部窗口的背景色，仅 iOS 支持

                                ③、backgroundColorBottom        HexColor	#ffffff	        底部窗口的背景色，仅 iOS 支持

                                ④、restartStrategy	String	    homePage	                重新启动策略配置。支持 homePage / homePageAndLatestPage

                                ⑤、initialRenderingCache	    String		                页面初始渲染缓存配置。支持 static / dynamic

                                ⑥、visualEffectInBackground	    String	    none	        切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
                                
                                ⑦、handleWebviewPreload	        String	    static	        控制预加载下个页面的时机。支持 static / manual / auto
            */  
        </script>
    </body>
</html>